window.onload = function () {
    var cha = document.querySelector(".chahao")
    var city2 = document.querySelectorAll(".city_nav>li")
    var chiden=document.querySelectorAll(".city-hidden>li")
    var city1= document.querySelector(".city_nav")
    var chiden1= document.querySelector(".city-hidden")
    var remark=document.querySelector(".remark-ren")
    var foregin=document.querySelector('.foregin-soil')
    for (var i = 0; i < city2.length; i++) {
      city2[i].index = i
        city2[i].onmouseover = function () {
            for (var j = 0; j < city2.length; j++) {
                chiden[j].index1 = j
               city2[j].className=''
               chiden[j].classList=''
            }
            this.classList.add('active')
            chiden[this.index].classList.add('active1')
        }
        chiden[i].onmouseover=function(){
            this.classList='active1'
            console.log(this.index1);
            city2[this.index1].classList.add('active')
        }
        chiden[i].onmouseout=function(){
            this.classList=''
            city2[this.index1].className=''
        }
    }
    city1.onmouseout=function(){
        for (var j = 0; j < city2.length; j++) {
            city2[j].className=''
            chiden[j].classList=''
         }
    }
    axios.get('https://guide.qyer.com/index.php?action=ajaxdownguide&ajaxID=5bee682b7b20e5c1476b7164').then(ref=>{
        ref.data.data.forEach(item => {
            var str=`
            <li>
            <img src="${item.avatar}" alt="">
             <a href="">${item.cn_name}</a>
             <span>穷游锦囊</span>
        </li>
            `
           remark.innerHTML+=str
        });
    }).catch(err=>{
        console.log(err);
    })
    
    axios.get('https://guide.qyer.com/index.php?action=ajaxlistguide&ajaxID=5bee6f7b7b20e5c1476b7168').then(ref=>{
        console.log(ref.data.data.list);
    ref.data.data.list.forEach(item=>{
       var str1=`
        <li>
        <div class="foregin-img">
            <img src="https:${item.pic}" alt="">
        </div>
        <p>${item.cn_name}</p>
        <span>${item.cn_name}</span>
        <a>2021-04-22</a>
    </li>
        `
      foregin.innerHTML+=str1
       
    })
}).catch(err=>{
    console.log(err);
})

    
}
